<div class="vt-toolbar vt-padding">
  <md-icon class="vt-menu" (click)="menu.toggle($event)">menu</md-icon>
  <p-menu #menu popup="popup" [model]="actions"></p-menu>
  <h1 class="vt-title">{{keyspaceName}}</h1>
  <md-icon class="vt-right-menu" (click)="refreshKeyspaceView()" [disabled]="inFlightQueries > 0">refresh</md-icon>
</div>

<h2 *ngIf="noShards()">There are no shards in this keyspace</h2>

<div *ngIf="keyspace.servingShards != undefined && keyspace.servingShards.length > 0">
  <h2 class="vt-padding">Serving Shards</h2>
  <div *ngFor="let shard of keyspace.servingShards" class="vt-card">
    <a class="vt-dark-link" [routerLink]="['/shard']" [queryParams]="{keyspace: keyspaceName, shard: shard}">
      <md-card >
        <md-card-title class="vt-serving-shard">{{shard}}</md-card-title>
      </md-card>
    </a>
  </div>
</div>

<div *ngIf="keyspace.nonservingShards != undefined && keyspace.nonservingShards.length > 0">
  <h2 class="vt-padding">Nonserving Shards</h2>
  <div *ngFor="let shard of keyspace.nonservingShards" class="vt-card">
    <a class="vt-dark-link" [routerLink]="['/shard']" [queryParams]="{keyspace: keyspaceName, shard: shard}">
      <md-card>
        <md-card-title class="vt-nonserving-shard">{{shard}}</md-card-title>
      </md-card>
    </a>
  </div>
</div>

<p-dialog [(header)]="dialogSettings.dialogTitle" [(visible)]="dialogSettings.open" draggable="" resizable="" width="800">
  <vt-dialog [(dialogContent)]="dialogContent" [(dialogSettings)]="dialogSettings" ></vt-dialog>
</p-dialog>
<div *ngIf="dialogSettings.open" class="vt-popUpContainer" >
</div>
